<template>
      <h3>用户登录</h3>
      <el-row class="row">
          <el-col :span="6" class="label">登录名称</el-col>
          <el-col :span="18">
            <el-input v-model="username" placeholder="Please input username" clearable />
          </el-col>
      </el-row>
      <el-row class="row">
          <el-col :span="6" class="label">登录密码</el-col>
          <el-col :span="18">
            <el-input v-model="password" placeholder="Please input password" show-password />
          </el-col>
      </el-row>
      <el-row class="row">
          <el-col :span="18" :offset="6">
            <el-button>重置</el-button>
            <el-button type="primary" @click="login">登录</el-button>
          </el-col>
      </el-row>
</template>

<script>
export default {
    name: "Login" ,
    data(){
        return {
            username: 'kaifamiao' ,
            password: 'hello2022'
        }
    },
    methods: {
        login(){
            // 因为指定了 axios.defaults.baseURL = '/api' 
            // 所以可以省略 /api 直接写 /customer/sign/in
            let uri = '/customer/sign/in' ;
            this.axios.post( uri , { username: this.username , password : this.password })
                      .then( response => {
                          console.log( response.data );
                          sessionStorage.setItem( 'authorization' , response.data );
                          sessionStorage.setItem( 'hasLoggedOn' , true );
                          this.$router.push( '/welcome' );
                      }).catch( error => {
                          console.log( error );
                      });
        }
    }
}
</script>

<style scoped>
.row {
    line-height: 50px ;
}
.label {
    text-align: right ;
}
</style>